<template>
    <div class="backendpage">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">
            <img src="../../assets/lizer/Lizer-logo.svg" />
        </div>
        <a-menu class="antmenu" theme="light" mode="inline" :default-selected-keys="[$route.path]" @click="handselect">
            <a-menu-item v-for="(item) in menuList" :key="item.path">
            <a-icon v-if="item.icon" :type="item.icon" />
            <template v-else>
                <img :src="item.svg" class="anticon anticon-container" />
            </template>
            <span>{{item.name}}</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout style="min-height: 100%;">
        <a-layout-header style="background: #fff; padding: 0;box-shadow: 0 1px 4px rgba(0,21,41,.08);">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <a-breadcrumb>
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>
              <transition name="component-fade" mode="out-in">
                <span :key="$route.meta.menuname">{{ $route.meta.menuname }}</span>
              </transition>

            </a-breadcrumb-item>
          </a-breadcrumb>
        </a-layout-header>
        <div class="tagmenu">
          <!-- <a-tag class="changtag" closable v-for="(item, index) in storeList" :key="index"  :class="$route.path === item.path ? 'activetag': ''" @click="gotourl(item)" @close="tagClose(e,item, index)">
          {{ item.name }}
          </a-tag> -->
          <div class="changtag" closable v-for="(item, index) in storeList" :key="index"  :class="$route.path === item.path ? 'activetag': ''" @click="gotourl(item)">
          {{ item.name }}
          <svg v-if="item.path !== '/log'" @click="tagClose(item, index)"  t="1705131309493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4221" width="16" height="16"><path d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z" p-id="4222"></path></svg>
          </div>
        </div>
        <a-layout-content
          style="min-height: unset;"
          :style="{ margin: '16px 16px', padding: '24px', background: '#fff' }"
        >
        <transition name="component-fade" mode="out-in">
        <router-view></router-view>
        </transition>
        </a-layout-content>
      </a-layout>
    </a-layout>
</div>
  </template>
<script>
import '@/plugins/antdesign'
import bookManageIcon from '@/assets/web/menu.svg'
import hotBookIcon from '@/assets/web/hot.svg'
import comBookIcon from '@/assets/web/commnd.svg'
import store from '../../store'
export default {
  data () {
    return {
      show: true,
      ppp: false,
      storeList: store.state.routerList,
      collapsed: true,
      menuList: [
        { icon: 'container', path: '/log', name: '日志管理' },
        { svg: bookManageIcon, path: '/bookmanage', name: '书籍管理' },
        { svg: hotBookIcon, path: '/hotbook', name: '热门书籍' },
        { svg: comBookIcon, path: '/combook', name: '推荐书籍' },
        { icon: 'upload', path: '/bookreq', name: '书籍审核' },
        { icon: 'user', path: '/users', name: '用户管理' }
      ]
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.getpath(val)
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    preventDefault (e) {
      console.log(e)
      e.preventDefault()
      console.log('Clicked! But prevent default.')
    },
    handselect (key) {
      this.$router.push(key.key)
    },
    getpath (val) {
      this.$store.commit('selectMenu', { name: val.meta.menuname, path: val.path })
    },
    gotourl (item) {
      this.$router.push(item.path)
    },
    // 关闭标签
    tagClose (tag, index) {
      const length = this.storeList.length - 1
      // vuex调方法的另一种写法
      this.$store.commit('closeTab', tag)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tag.path !== this.$route.path) {
        return
      }
      debugger
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        this.$router.push({ path: this.storeList[index - 1].path })
      } else {
        // 否则往右边跳转
        this.$router.push({ path: this.storeList[index].path })
      }
      console.log(this.storeList)
    }
  }
}
</script>
<style lang="less" scoped>
  .backendpage{
    width: 100%;
    height: 100%;
  }
  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
  }
  #components-layout-demo-custom-trigger{
    height: 100%;
  }
  .ant-layout-sider{
    background: #ffffff;
  }
  .logo{
    text-align: center;
    img {
        max-height: 100%;
    }
  }
  .antmenu{
    height: calc(100% - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ant-menu-item{
    // text-align: center;
    // padding-left: 0px !important;
    // margin: 0 !important;
    // height: 50px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }
  .ant-layout-sider{
    height: 100%;
  }
  .changtag{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 30px;
    line-height: 30px;
    width: 90px;
    background: #ffffff;
    margin-right: 10px;
    font-size: 13px;
    cursor: pointer;
    svg{
      padding: 3px;
    }
    svg:hover{
      border-radius: 50%;
      background: #eee;
      cursor: pointer;
    }
  }
  .activetag{
    background: #fe8e64;
    color: white;
    svg{
      fill: white;
    }
    svg:hover{
      background: #df6c5a;
      border-radius: 50%;
    }
  }
  .tagmenu{
    // margin-left: 16px;
    margin-top: 1px;
    display: flex;
    width: 100%;
    background: #ffffff;
  }
  .ant-layout-header{
    display: flex;
    align-items: center;
  }
  .component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .3s ease;
  }
  .component-fade-enter, .component-fade-leave-to
  /* .component-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }

  // .component-fade-enter-active, .component-fade-leave-active {
  //   transition: transform 0.3s ease;
  // }

  // .component-fade-enter, .component-fade-leave-to {
  //   transform: translateX(-100%);
  // }

  // .component-fade-enter-to, .component-fade-leave-active {
  //   transform: translateX(0);
  // }

  </style>
